<script setup lang="ts">
import tableList from "@/components/tableList/tableList.vue";
import {dataList} from "@/api/result";
import {reactive, ref, onMounted} from 'vue'
import {useRouter} from 'vue-router'

const router = useRouter()
let searchRef = ref('')
const searchForm = reactive({
  name: '',
})
let pageData = reactive({
  currentPage: 1,
  pageSize: 20,
  total: 0,
})
const loading = ref(false);
const tableData = reactive({data: []})
const tableHeader = reactive([
  {label: '学生姓名', prop: 'name'},
  {label: '总分数', prop: 'total_score'},
  {
    label: '是否已评分', prop: 'score_finish', type: 'html', code: (row) => {
      if (row.score_finish == 1) {
        return '<span style="color: #F56C6C">否</span>'
      }else{
        return '<span style="color: #67C23A">是</span>'
      }
    }
  },
  {label: '登录时间', prop: 'login_time'},
])

const tableOptions = {
  label: '操作',
  width: '150px',
  value: 0,
  options: [
    {
      label: '查看考试结果',
      key: 0,
      type: 'text',
      method: (row) => {
        handleDetail(row)
      },
    }
  ]
}

const handleDetail = (row) => {
  router.push({path: '/result/result-info', query: {exam_id: row.exam_id}})
}

const handleReset = () => {
  searchRef.value.resetFields()
}

const onSearch = () => {
  pageData.currentPage = 1
  fetchData()
}

const fetchData = async () => {
  let params = searchForm
  params.page = pageData.currentPage
  params.limit = pageData.pageSize
  loading.value = true
  let res = await dataList(params);
  console.log('user', res)
  loading.value = false
  if (res) {
    tableData.data = res.data.list
    pageData.total = res.data.page.amount
  }
}

const handlePageChange = (param) => {
  pageData.pageSize = param.limit
  pageData.currentPage = param.page
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <el-row justify="center">
    <el-col :span="18">
      <el-form :inline="true" :model="searchForm" class="el-input-form" ref="searchRef">
        <el-form-item label="学生姓名" prop="name">
          <el-input @keyup.enter="fetchData" clearable placeholder="请输入学生姓名" v-model="searchForm.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="onSearch" icon="search">查询</el-button>
          <el-button @click="handleReset" icon="RefreshRight">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col class="white-shadow" :span="18" v-loading="loading">
      <tableList :table-data="tableData.data"
                 :table-options="tableOptions"
                 :page-data="pageData"
                 @handle-page-change="handlePageChange"
                 :table-header="tableHeader"></tableList>
    </el-col>
  </el-row>
</template>

<style scoped lang="less">

</style>